<template>
 <div class="homeContainer">
   <div class="homeleft">
     <el-menu
         default-active="2"
         class="el-menu-vertical-demo"
         background-color="#545c64"
         text-color="#fff"
         active-text-color="#ffd04b"
         @select="handleSelect">
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location"></i>
           <span>数据总览</span>
         </template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="studentinfo">学生数据</el-menu-item>
           <el-menu-item index="scoreinfo">成绩数据</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
       <el-menu-item index="allquestion">
         <i class="el-icon-menu"></i>
         <span slot="title">问题社区</span>
       </el-menu-item>
       <el-menu-item index="secondhand">
         <i class="el-icon-document"></i>
         <span slot="title">二手市场</span>
       </el-menu-item>
       <el-menu-item index="courseinfo">
         <i class="el-icon-setting"></i>
         <span slot="title">课程数据</span>
       </el-menu-item>
     </el-menu>
   </div>
   <div class="homeright">
     <div class="right_top">
       <RightHeader></RightHeader>
     </div>
     <div class="right_below">
       <keep-alive>
         <router-view></router-view>
       </keep-alive>
     </div>
   </div>
 </div>
</template>

<script>
import RightHeader from "@/components/RightHeader.vue";
export default {
  name: "HomeIndex",
  components:{
    RightHeader
  },
  methods:{
    handleSelect(index){
      // console.log(index)
      this.$router.push({
        name:index
      })
    }
  }

}
</script>

<style scoped>
.homeContainer{
  display: flex;
}
.homeleft{
  background-color: #545c64;
  width: 200px;
  min-height: 100vh;
}
.homeright{
  /*background-color: chartreuse;*/
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.right_top{
  flex: 0;
  /*background-color: deeppink;*/
}
.right_below {
  flex: 1;
}
</style>